<template>
   <div class="cbody">
      <div class="zhezhao" @click="hidezhezhao"></div>
      <transition name="recording-desc" v-if="showNavbar">
        <div class="home-bar">
      <div class="bar"  @click.stop="changeShowBar">
        <div class="avatar">
          <router-link to="/mineDesc">
          <img src="../../../static/img/u=4163240316,644044187&fm=27&gp=0.jpg" class="avatar-img">
          <h1 class="name">{{this.name}}</h1>
          <p class="desc">{{this.desc}}</p>
          </router-link>
        </div>
        <div class="list">
          <div class="list-item clearfix" @click="changeRouter">
            <div class="icon">
              <img src="../../../static/img/dingdan@3x.png" alt="">
            </div>
            <p class="message">{{this.order}}</p>
          </div>
          <div class="list-item clearfix" @click="changeRouterWallet">
            <div class="icon">
              <img src="../../../static/img/qianbao@3x.png" alt="">
            </div>
            <p class="message">{{this.wallet}}</p>
          </div>
          <div class="list-item clearfix" @click="changeRouterPrize">
            <div class="icon">
              <img src="../../../static/img/tuijian@3x.png" alt="">
            </div>
            <p class="message">{{this.recommend}}</p>
          </div>
          <div class="list-item clearfix" @click="changeRouterSet">
            <div class="icon">
              <img src="../../../static/img/shezhi@3x.png" alt="">
            </div>
            <p class="message">{{this.setting}}</p>
          </div>
        </div>
        <button class="button" v-if="loginShow" @click="login">{{this.button_login}}</button>
        <button class="button" v-if="!loginShow" @click="unLogin">{{this.button_quit}}</button>
      </div>
        </div>
      </transition>
   </div>
</template>

<script>

// 引入这个页面需要的方法
import {mapMutations,mapGetters} from 'vuex'
import axios from 'axios'
import {getDriver} from 'api/api'
export default {
  data () {
    return {
      name: '未登录',
      desc: '点击展开个人详细信息',
      order: '我的订单',
      wallet: '我的钱包',
      recommend: '推荐有奖',
      setting: '设置',
      button_login: '登录',
      button_quit: '退出登录',
      loginShow:false
    }
  },
  computed: {
    ...mapGetters([
      'showNavbar'
    ])
  },
  created () {
    this.userInfo()
    this.init()
  },
  methods: {
    init() {
      if (localStorage.getItem('token') === null) {
        this.loginShow=true
      }else if(localStorage.getItem('token') !== null) {
        this.loginShow=false
      }
    },
    hidezhezhao () {
      const _this = this
      _this.setShowNavbar(false)
      setTimeout(function () {
        _this.setShowBar()
      }, 500)
    },
    touchStart (ev) {
      ev = ev || event
      ev.preventDefault()
      if(ev.touches.length == 1) {
          this.startX = ev.touches[0].clientX
      }
    },
    touchMove (ev) {
        ev = ev || event
        ev.preventDefault()
        let btnWidth = this.$refs.remove.offsetWidth
        let btnImg = this.$refs.btnImg.offsetWidth
        console.log(ev.targetTouches)
        console.log(ev.changedTouches)
        if(ev.touches.length == 1) {
            this.moveX = ev.touches[0].clientX
            this.disX = this.moveX-this.startX
            if(this.disX<0 || this.disX == 0) {
                this.slideEffect = 'transform:translateX(0px)'
            }else if(this.disX>0){

            }
        }
    },
    // 点击切换我的订单路由
    changeRouter () {
      this.$router.push('/myOrder')
    },
    // 点击切换我的钱包
    changeRouterWallet () {
      this.$router.push('/wallet')
    },
    // 点击切换推荐有奖
    changeRouterPrize () {
      this.$router.push('/prize')
    },
    // 点击切换设置
    changeRouterSet () {
      this.$router.push('/set')
    },
    // 点击隐藏
    changeShowBar (ev) {

    },
    // 点击登录
    login() {
      this.$router.push('/login')
      console.log('登录')
    },
    // 退出登陆
    unLogin () {
      localStorage.clear()
      this.setShowBar(false)
      this.setShowNavbar(false)
      this.$router.push('/login')
      console.log('退出登录')
    },
    // 获取用户个人资料
    userInfo () {
      let userId = localStorage.getItem('userId')
      axios.get(getDriver + userId + '/personInfo').then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          this.name = res.data.result.name
          this.desc = res.data.result.selfIntroduction
          // this.userImg = res.data.result.avatar
        }
      })
    },
    ...mapMutations({
      setShowBar: 'SET_SHOWBAR',
      setShowNavbar: 'SET_SHOWNAVBAR'
    })
  }
}
</script>

<style  scoped lang="stylus" rel="stylesheet/stylus">
  .recording-desc-enter-active, .recording-desc-leave-active
    transition: all 0.8s

  .recording-desc-enter, .recording-desc-leave-to
    transform: translate3d(-100%, 0, 0)
  .cbody {
    width:100vw
    height:100vh
  }
  .zhezhao
    width:100vw
    height:100vh
    background:rgba(0, 0, 0, 0.4)
    position: fixed
    left: 0
    right: 0
    z-index: 98
    transition: opacity 2s linear
  .home-bar
    left: 0
    right: 0
    top: 0
    bottom: 0
    z-index:97
    width: 100%
    height: 100%
    .bar
      position: relative
      width: 240px
      height: 100%
      z-index: 9999999
      background-color: #fff
      .avatar
        width: 220px
        height: 145px
        margin: 0 auto
        border-bottom: 1px solid rgb(242, 242, 242)
        .avatar-img
          width: 60px
          height: 60px
          margin-top: 20px
        .name
          font-size: 17px
          font-weight: 600
          margin-top: 10px
        .desc
          margin-top: 5px
          font-size: 12px
          color: rgb(153, 153, 153)
      .list
        width: 150px
        height: 200px
        margin: 0 auto
        .list-item
          width: 100%
          height: 15px
          margin-top: 30px
          .icon
            float: left
            width: 15px
            height: 15px
            box-sizing: border-box
            img 
              width 100%
          .message
            float: left
            margin-left: 15px
            font-size: 15px
            color: rgb(51, 51, 51)
            font-weight: 600
      .button
        position: absolute
        bottom: 14px
        left: 50%
        margin-left: -105px
        width: 210px
        height: 34px
        line-height: 34px
        background-color: rgb(51, 51, 51)
        border: none
        outline: none
        border-radius: 5px
        color: rgb(255, 255, 255)
</style>